<template>
	<div class="internetToolBar">
		<!-- <div class="add" >
			<el-button
				type="primary"
				icon="el-icon-circle-plus"
				size="medium"
				@click="interDialog"
				>添加</el-button
			>
		</div> -->
		<div class="search">
			<el-input
				class="searchInput"
				prefix-icon="el-icon-search"
				clearable
				v-model="searchInput"
				placeholder="搜索IP..."
				@change="handSearch"
			>
			</el-input>

			<!-- <el-button
				type="primary"
				icon="el-icon-search"
				@click="handSearch"
				size='medium'
				>搜索</el-button> -->
		</div>

		<!-- <div class="info">
			<el-date-picker
				v-model="StartTime"
				type="datetime"
				@change="timeInfo"
				placeholder="选择起始时间"
				:pickerOptions="pickerOptions"
			>
			</el-date-picker>
			<el-date-picker
				v-model="EndTime"
				type="datetime"
				@change="timeInfo"
				placeholder="选择结束时间"
				:pickerOptions="pickerOptions"
			>
			</el-date-picker>
			<div>
				<el-button
					type="primary"
					@click="handInfo"
					size="medium"
					icon="el-icon-search"
					>查询</el-button
				>
			</div>
		</div> -->
		<div class="filer">
			<v-Tbfilter
			:tableColumns="flowItem"
			@tbChangeLie="tbChangeLie"
		></v-Tbfilter>
		</div>
	</div>
</template>

<script>
import vTbfilter from '@/components/common/toolbar/TbFilterColumn'
export default {
	props: [
		'reportSearchIP',
		// 'reportStartTime',
		// 'reportEndTime',
		'flowItem'
	],
	components:{
		vTbfilter
	},

	created() {
		this.initStartTIme();
	},
	watch: {},
	data() {
		return {
			searchInput: '',
			// StartTime:new Date(),
			// EndTime:new Date()
			StartTime: '2019-09-20 00:00:00',
			EndTime: '2019-09-30 00:00:00',
			pickerOptions:{
					disabledDate:(time)=>{
						return time.getTime() > Date.now()
				}
			}
			
		};
	},
	methods: {
		handInfo() {
			this.$emit('handleInfo');
		},
		handSearch() {
			this.$emit('handleSearch', this.searchInput);
		},
		timeInfo() {
			this.$emit('timeChange', {
				startTime: this.StartTime,
				endTime: this.EndTime,
			});
		},
		// 初始化开始时间
		initStartTIme() {
			let deta = new Date();
			deta.setMonth(deta.getMonth() - 1);
			this.startTime = deta;
		},
		// timeProcess(time) {
		// 	return moment(time).format('YYYY-MM-DD HH:mm:ss');
		// },
		// timer() {
		// 	this.startTime = this.timeProcess(this.startTime);
		// 	this.EndTime = this.timeProcess(this.EndTime);
		// },

		interDialog() {
			this.$emit('interDialog');
		},
		tbChangeLie(val){
			this.$emit('changeLie',val)
		},
	},
};
</script>

<style scoped>

.searchInput {
	width: 240px;
	margin-right: 10px;
}
.internetToolBar {
    width: 99vw;
    display: grid;
    grid-template-columns: 13vw 5vw ;
	margin-bottom: 20px;
}
/* .search {
    display: grid;
    grid-template-columns: 50% 20%;
} */
.info {
	margin-left: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr 1.5fr 1fr;
	column-gap: 20px;

}
.add {
	margin-right: 20px;
}
</style>
